<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<style>
    .box {
        margin: 200px;
        width: 200px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        vertical-align: center;
        font-size: 30px;
    }
</style>
<body>

<div id="box" class="box">
	Hello World
</div>

</body>
</html>
<script>
	//实现把鼠标指针作为手电筒照射元素产生实时阴影效果
	//整个流程依托鼠标指针移动 mousemove 事件触发,为DOM添加鼠标移动监听器
	document.addEventListener('mousemove', function (e) {
		//box的中心点位
		var centerX = 200 + 100; //外边距+盒模型宽度的一半
		var centerY = 200 + 50; //外边距+盒模型高度的一半

		//实时获取鼠标坐标点位
		var mouseX = e.pageX;
		var mouseY = e.pageY;
		console.log('鼠标指针移动了', mouseX, mouseY);

		//实时计算偏移量及鼠标指针到中心点位的直线距离
		var offsetX = centerX - mouseX;
		var offsetY = centerY - mouseY;
		var blur = Math.sqrt(offsetX ** 2 + offsetY ** 2) / 20;

		//实时修改box的text-shadow
		document.getElementById('box').style.textShadow = offsetX + 'px ' + offsetY + 'px ' + blur + 'px';
	})
</script>
